
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>'Hello, world!' example</title>
    <style type="text/css">
        #the-canvas {
            border:1px solid black;
        }
    </style>
</head>

<body>
<script src="https://cdn.bootcdn.net/ajax/libs/pdf.js/2.3.200/pdf.js"></script>


<a href="/pdfjs/web/viewer.html?">点击测试</a>

<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.12.313/pdf.min.js" integrity="sha512-qa1o08MA0596eSNsnkRv5vuGloSKUhY09O31MY2OJpODjUVlaL0GOJJcyt7J7Z61FiEgHMgBkH04ZJ+vcuLs/w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
<h1>PDF.js 'Hello, base64!' example</h1>
<!--<canvas id="the-canvas"></canvas>-->

</body>
<script type="text/javascript">
    /**
     *坑：
     * 之前版本（具体版本分界线我也不知道，我下载 的是2.0.943版本）写法：
     *      PDFJS.workerSrc = '../build/pdf.worker.js';//加载核心库
     *      PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
     *
     *      })
     * 2.0.943版本写法：
     *      pdfjsLib.GlobalWorkerOptions.workerSrc ='../build/pdf.worker.js';
     *      pdfjsLib.getDocument(url).then(function(pdf){
     *
     *      });
     */
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.bootcdn.net/ajax/libs/pdf.js/2.3.200/pdf.worker.js';
    var _url = 'http://10.120.65.140:2133//api/media/temp_pdf_file/40453_北岳区第二期整风文件(第一分册)__page_4_to_4.pdf';
    var loadingTask = pdfjsLib.getDocument({ url: _url, });//  _url为后台请求pdf流的路径
    loadingTask.promise.then(function(pdf) {
        pdf.getPage(1).then(function(page) {
            /**
             * 坑：
             * 官网上给的例子是这样写的
             *      var scale = 1.5;
             *      var viewport = page.getViewport({ scale: scale, });
             * 但是！！我们要这样写：
             *      var scale = 1.5;
             *      var viewport = page.getViewport(scale);
             */
            var scale = 1.5;
            var viewport = page.getViewport(scale);
            var canvas = document.getElementById('the-canvas');
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            var renderContext = {
                canvasContext: context,
                viewport: viewport,
            };
            page.render(renderContext);
        });
    });
</script>
</html></html>